<template>
  <form-dialop
    :title="$t('policy.NewUSBRuleGroup')"
    :visible="visible"
    width="30%"
    @handleClose="handleClose"
		v-loading="loading"
  >
    <template #content>
      <el-form ref="form" :model="formData" :rules="formRule" label-width="90px" @submit.native.prevent>
        <el-form-item :label="$t('common.name')" prop="name" name="resource-pool-form-name">
          <el-input v-model="formData.name" @keyup.enter.native="submit"></el-input>
        </el-form-item>
        <el-form-item v-if="is_system === 'system_admin'" :label="$t('common.tenant')" prop='tenent_user'>
          <el-select v-model="cloud_user_id">
            <el-option
              v-for="item in tenant_options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('common.description')" prop="description" name="resource-pool-form-description">
          <el-input v-model="formData.description" type="textarea" maxlength="200" show-word-limit @keyup.enter.native="submit"></el-input>
        </el-form-item>
        <!-- <el-form-item :label="$t('policy.is_default')" prop="is_default" name="is_default">
          <el-checkbox
            v-model="formData.is_default"
          >
          </el-checkbox>
        </el-form-item> -->
      </el-form>
    </template>
    <template #footer>
      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submit" :disabled="loading">{{ $t('common.confirm') }}</el-button>
    </template>
  </form-dialop>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialop from '../../../components/Dialog/formDialog.vue';
import { AuthModule } from '../../../store/modules/auth';
export default Vue.extend({
  components: {
    FormDialop
  },
  data() {
    return {
      visible: false,
      loading: false,
      type: "create",
      defaultName: '',
      formData: {
        name: "",
        description: "",
      },
      cloud_user_id: '',
      tenant_options: [],
      is_system: AuthModule.authrole,
      formRule: {
        name: [
          { required: true, message: (this as any).$t('user.nameRequired').toString(), trigger: 'blur' },
          { max: 50, message: (this as any).$t('policy.message.ruleLength').toString(), trigger: 'blur' },
          { validator: (rule: any, value: any, callback: any) => {
            if (value === (this as any).defaultName) {
              return callback();
            } else {
              (this as any).$pandaApi.apiCheckUSBRuleGroupName({name: value, page: 1, page_size: 1}).then(() => {
                return callback();
              }).catch((e: any) => {
                return callback(e);
              });
            }
          }, trigger: 'blur' }
        ],
        description: [
          { max: 200, message: (this as any).$t('policy.message.descriptionLength').toString(), trigger: 'blur' }
        ],
      }
    }
  },
  created() {
  },
  methods: {
   async init(userList: any) {
     this.tenant_options = [];
			this.formData = {
					name: "",
					description: ""
			};
      if (this.is_system === 'system_admin') {
        (this.tenant_options as any) = userList;
        if (this.cloud_user_id === '' && this.tenant_options.length > 0) {
          this.cloud_user_id = (this.tenant_options[0] as any).value;
        }
      }
      this.$nextTick(() => {
          if (this.$refs['form']) {
            (this.$refs['form'] as any).clearValidate();
          }
      })
			this.visible = true;
    },
    submit() {
      (this.$refs.form as any).validate((valid: any) => {
        if (valid) {
					let params: any = {};
					params.name = this.formData.name;
					params.description = this.formData.description;
          if (this.is_system === 'system_admin') {
            params.cloud_tenant_id = this.cloud_user_id;
          }
					this.loading = true;
          (this as any).$pandaApi.apiAddUsbRuleGroup(params).then((res: any) => {
						this.loading = false;
						this.$emit('success');
						this.$message({
							message: this.$t('policy.message.createUSBRuleGroupSuc').toString(),
							type: 'success'
						});
						this.visible = false;
					}).catch(() => {
						this.loading = false;
						this.$message({
							message: this.$t('policy.message.createUSBRuleGroupFail').toString(),
							type: 'warning'
						});
					})
        }
      });
    },
    handleClose() {
      this.formData = {
        name: "",
        description: ""
      };
      this.visible = false;
			this.loading = false;
    }
  }
})
</script>
